<template>
	<div class="wrap-regist">
		<div class="register-container">
			<h2 class="title-rigest">学生用户注册</h2>
			<br />
			<form id="registerForm">
				<div>
					<label for="name" class="label">姓名:</label>
					<input type="text" id="name" required v-model.trim="registInfo.name" />
				</div>
				<br />
				<div>
					<label for="studentId" class="label">学号:</label>
					<input type="text" id="studentId" required v-model.number="registInfo.id" />
				</div>
				<br />
				<div>
					<label for="password" class="label">密码:</label>
					<input type="password" id="password" required v-model.trim="registInfo.password" />
				</div>
				<br />
				<div>
					<label for="phone" class="label">电话:</label>
					<input type="text" id="phone" required v-model.trim="registInfo.phone" />
				</div>
				<br />

				<div>
					<el-button type="primary" @click="submitForm" v-loading="loading" @keydown.enter="submitForm"
						>立即注册</el-button
					>
				</div>
			</form>

			<el-button class="btn" link type="primary" @click="$router.push('/login')">去登录</el-button>
		</div>
	</div>
</template>

<script setup>
import { reactive, ref, getCurrentInstance } from 'vue'
import { registUser } from '@/utils/axios/stuReqest'
import { useRouter } from 'vue-router'
import useRegStore from '@/stores/useReg'

const { phoneIsOk } = useRegStore()

const router = useRouter()
const loading = ref(false)
const { proxy } = getCurrentInstance()
const registInfo = reactive({
	name: '',
	id: '',
	password: '',
	phone: '',
})

const checkRegistInfo = () => {
	if (registInfo.name.length > 20) {
		ElMessage.warning({ message: '名字过长', duration: 1000 })
		return false
	}

	if (registInfo.password.length > 20) {
		ElMessage.warning({ message: '密码过长', duration: 1000 })
		return false
	}
	if (registInfo.id > 48000) {
		ElMessage.error({ transition: 1000, message: '学号不能超过48000' })
		return false
	}
	if (!phoneIsOk(registInfo.phone)) {
		ElMessage.warning({ message: '手机号不符合', duration: 1000 })
		return false
	}

	return true
}

const submitForm = () => {
	let flag = registInfo.id && registInfo.password && registInfo.name && registInfo.phone
	if (!flag) return ElMessage.error({ transition: 1000, message: '请输入完整信息' })

	if (!checkRegistInfo()) return

	let { name, id, password, phone } = registInfo
	console.log('registInfo:: ', password)
	loading.value = true
	registUser('/stu/sign', { stuName: name, stuId: id, password: proxy.$md5(password), phone })
		.then(() => {
			loading.value = false
			router.push('/login')
		})
		.catch(() => (loading.value = false))
}
</script>

<style scoped lang="scss">
.chioce {
	display: flex;
	.radio {
		width: 183px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
}
.title-rigest {
	color: #a0cfff;
	font-size: 25px;
	font-weight: 600;
}
.label {
	display: inline-block;
	// text-align: justify;
	width: 100px;
}
.wrap-regist {
	margin: 0;
	padding: 0;
	background-image: url('@/assets/img/1.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh; /* 使内容垂直居中 */
}

.register-container {
	/* 注册框样式 */
	background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
	padding: 50px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	max-width: 430px; /* 限制最大宽度 */
	text-align: center; /* 表单内容对齐 */
	position: relative;
}

.btn {
	position: absolute;
	bottom: 10px;
	right: 10px;
}

input[type='text'],
input[type='password'] {
	height: 30px;
	margin-left: 5px;
	border-radius: 5px;
	box-shadow: 0 0 5px #a0cfff;
	border: 0;
	padding: 5px;
	&:focus {
		outline: #3597f8;

		box-shadow: 0 0 5px #3597f8;
		caret-color: #126fcc;
	}
}
.el-button {
	margin-top: 10px;
}
</style>
